<template>
  <div class="app-container">
	<div class="bgWhite radius8 plr20 pt30 pb30">
		<div class="mb20">
		  <span class="fb fs16">{{ title }}</span>		  
		</div>
      <!-- 添加或修改 -->
      <el-form ref="formRef" :rules="rules" :model="form" >
        <el-form-item label="部门公海进入规则:" prop="executionType" label-width="140px">
          <el-radio-group v-model="form.executionType">
            <el-radio class="bus-radio-button-selected-bg-color" v-for="item in bus_opportuity_rules_type_2"
              :label="item.value" :value="item.value">{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="executionContent" label-width="12px">
          <div class="mb10">
			  <b>超过N天"未跟进"的客户，由系统定时划入公海</b>
			  <div class="color2 mb10"><span class="color-red">*</span>说明：从开启公海或获得客户（新增、转移、从公海抢到客户）开始，对客户写跟进以及新增订单都视为跟进了客户。</div>
			  <el-radio-group v-model="form.executionContent.notFollowUp.startFlag" style="width:100%">
			    <el-radio class="bus-radio-button-selected-bg-color" v-for="item in bus_is_flag" :label="item.value"
			      :value="item.value">{{ item.label }}
			    </el-radio>
			  </el-radio-group>
		  </div>

          <el-table :data="[form.executionContent.notFollowUp]" style="width: 100%" :header-row-style="{
            background: '#FAFAFA',
            color: '#0C1019',
            height: '54px',
          }" :cell-style="{ height: '54px' }">

            <el-table-column label="客户类型" align="center" width="100px">
              <template #default>
                所有客户
              </template>
            </el-table-column>

            <el-table-column label="未跟进天数" align="center">
              <template #default>
                <el-form :model="form.executionContent.notFollowUp">
                  <el-form-item prop="day">
					<div class="flex col-center row-center" style="width: 100%;">
                    超过
                    <el-input type="text" style="width:50px;margin: 0 5px;" v-model="form.executionContent.notFollowUp.day" />
                    天未跟进
					</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column label="划入公海时间" align="center">
              <template #default>
                <el-form :model="form.executionContent.notFollowUp">
                  <el-form-item prop="time">
					<div class="flex col-center row-center" style="width: 100%;">
                    系统会在每天
                    <el-time-picker style="margin: 0 5px;" v-model="form.executionContent.notFollowUp.time" format="HH:mm:ss"
                      value-format="HH:mm:ss" />
                    将客户划入公海
					</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column label="销售人员提醒时间" align="center">
              <template #default>
                <el-form :model="form.executionContent.notFollowUp">
                  <el-form-item prop="reminderTime">
					<div class="flex col-center row-center" style="width: 100%;">
                    并在划入公海前
                    <el-input type="text" style="width:40px;margin: 0 5px;" v-model="form.executionContent.notFollowUp.reminderTime" />
                    天提请销售人员及时跟进
					</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>

          <div class="mb10 mt20">
			  <b>超过N天"未成交"的客户，由系统定时划入公海</b>
			  <div class="color2 mb10"><span class="color-red">*</span>说明：从开启公海或获得客户（新增、转移、从公海抢到客户）开始来计算客户多久未达到“成交”状态。</div>
			  <el-radio-group v-model="form.executionContent.notTrading.startFlag" style="width:100%">
			    <el-radio class="bus-radio-button-selected-bg-color" v-for="item in bus_is_flag" :label="item.value"
			      :value="item.value">{{ item.label }}
			    </el-radio>
			  </el-radio-group>
		  </div>

          <el-table :data="[form.executionContent.notTrading]" style="width: 100%" :header-row-style="{
            background: '#FAFAFA',
            color: '#0C1019',
            height: '54px',
          }" :cell-style="{ height: '54px' }">

            <el-table-column label="客户类型" align="center" width="100px">
              <template #default>
                所有客户
              </template>
            </el-table-column>

            <el-table-column label="未跟进天数" align="center">
              <template #default>
                <el-form :model="form.executionContent.notTrading">
                  <el-form-item prop="day">
					<div class="flex col-center row-center" style="width: 100%;">
                    超过
                    <el-input type="text" style="width:50px;margin: 0 5px;" v-model="form.executionContent.notTrading.day" />
                    天未跟进
					</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column label="划入公海时间" align="center">
              <template #default>
                <el-form :model="form.executionContent.notTrading">
                  <el-form-item prop="time">
					  <div class="flex col-center row-center" style="width: 100%;">
                    系统会在每天
                    <el-time-picker style="margin: 0 5px;" v-model="form.executionContent.notTrading.time" format="HH:mm:ss"
                      value-format="HH:mm:ss" />
                    将客户划入公海
					</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column label="销售人员提醒时间" align="center">
              <template #default>
                <el-form :model="form.executionContent.notTrading">
                  <el-form-item prop="reminderTime">
					  <div class="flex col-center row-center" style="width: 100%;">
                    并在划入公海前
                    <el-input type="text" style="width:40px;margin: 0 5px;" v-model="form.executionContent.notTrading.reminderTime" />
                    天提请销售人员及时跟进
					</div>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>


        </el-form-item>
      </el-form>

      <div class="text-center mt30 pb20 pt10">
        <el-button type="defaultBtn" size="large" style="width: 90px;" @click="submitForm"
		v-hasPermi="['deptHighseas:edit']"
		>确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="RulesDeptHighseasSetup">
import { listRules, updateRules } from "@/api/business/rules";
const { proxy } = getCurrentInstance();
const { bus_opportuity_rules_type_2 } = proxy.useDict(
  "bus_opportuity_rules_type_2"
);

const bus_is_flag = [
  {
    value: 1,
    label: "不启用",
  },
  {
    value: 0,
    label: "启用",
  },
];

// 遮罩层
const loading = ref(true);
// 选中数组
const ids = ref([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
// 物流规则表格数据
const rulesList = ref([]);
// 弹出层标题
const title = ref("部门公海规则设置");
// 是否显示弹出层
const open = ref(true);
// 查询参数
const queryParams = ref({
  rulesCode: "dept_highseas",
});
// 表单参数
const form = ref({
  id: null,
  executionType: "1001",
  executionContent: {
    notTrading: { day: 30, time: "15:00", startFlag: 0, reminderTime: 1, automaticTime: 1729837357893 },
    notFollowUp: { day: 1, time: "15:00", startFlag: 0, reminderTime: 1, automaticTime: 1729837357893 },
    automaticTime: 1729848074386
  },
});

/** 查询 规则列表 */
const getList = () => {
  loading.value = true;
  listRules(queryParams.value).then((response) => {
    form.value = response.rows[0];
  });
};
/** 提交按钮 */
const submitForm = () => {
  // 擦除时间戳
  form.value.executionContent.notTrading.automaticTime = null;
  form.value.executionContent.notFollowUp.automaticTime = null;
  form.value.executionContent.automaticTime = null;

  updateRules(form.value).then((response) => {
    proxy.$modal.msgSuccess("修改成功");
    getList();
  });
};

getList();
</script>
